<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #25263b;
				height:100%;
				margin: 0;
				padding: 0;
			}
			#app{
				height:100%;
				background-color: #25263b;
				display: flex;
				flex-direction: column;
				color:#fff;
				padding: 10px;
				font-size: 24px;
			}
			
			.module{
				background-color:#2f2f4b;
			}
			.canshu-row{
				flex: 1;
    				display: flex;
    				justify-content: space-between;
    				padding: 1vh 1vw;
			}
			.canshu-item{
				//flex: 1;
				width: 19%;
			    display: flex;
			    justify-content: center;
			    
			    flex-direction: column;
			    border: 2px solid #5a5870;
			    //margin: 0.3rem;
			}
			
		</style>
	</head>

	<body>
		<div id="app" class="mui-content">
			<div class="module" style="font-size: 2vw;height: auto;padding: 2.5vh 2vw;display: flex;justify-content: space-between;">
				<div><span>状态提醒：</span><span style="color: #ea6063;">停止测量</span></div>
				<div style="color: #ea6063;">{{now}}</div>
			</div>
			<div style="margin-top:2vh;margin-left:-1vw;height: auto;display: flex;justify-content: space-between;">
				<div class="module" style="padding:1.5vh 0;flex:1;margin-left: 1vw;display: flex;justify-content: center;" v-for="item in arr1">
					<div style="text-align: center;">
						<div style="height:5vh;background-position: center;background-size: contain;background-repeat: no-repeat;" :style="{backgroundImage:'url('+item.icon+')'}"></div>
						<span style="font-size: 1.5vw;">{{item.label}}</span>
					</div>
					<div style="font-size: 4vw;padding-left: 1vw;display: flex;justify-content: center;flex-direction: column;">
						{{valObj[item.field]}}
					</div>
				</div>
			</div>
			<div class="module" style="margin-top:2vh;flex:1;display: flex;flex-direction: column;">
				<div class="canshu-row">
					<div v-for="item in arr2_1" class="canshu-item">
						<div style="font-size: 5vw;text-align: center;padding: 3vh;">
							{{item.field}}
						</div>
						<div style="display: flex;justify-content: center;align-items: center;">
							<div style="width:1.2vh;height:1.2vh;border-radius: 50%;display: inline-block;" :style="{backgroundColor:item.color}"></div>
							<span style="padding-left: 0.5vw;font-size:1.5vw;">{{item.label}}</span>
						</div>
					</div>
				</div>
				<div class="canshu-row">
					<div v-for="item in arr2_2" class="canshu-item">
						<div style="font-size: 5vw;text-align: center;padding: 3vh;">
							{{item.field}}
						</div>
						<div style="display: flex;justify-content: center;align-items: center;">
							<div style="width:1.2vh;height:1.2vh;border-radius: 50%;display: inline-block;" :style="{backgroundColor:item.color}"></div>
							<span style="padding-left: 0.5vw;font-size:1.5vw;">{{item.label}}</span>
						</div>
					</div>
					<div class="canshu-item" style="font-size:4vh;align-items: center;border: 1px solid transparent;text-align:center;background: linear-gradient(#ab3d95, #4143f4);">
						开始测量
					</div>
				</div>
			</div>
			<div class="module" style="margin-top:2vh;font-size: 2vw;height: auto;padding: 2.5vh 2vw;display: flex;justify-content: space-between;">
				<div><span>文件记录：</span><span style="color: #327de0;">aaaaaaaaaaaaaaaaaaaaa.txt</span></div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript" charset="utf-8">
			new Vue({
				el: '#app',
				data: {
					now: null,
					arr1: [
						{icon:'../images/jiaozhuncs/flag.png', label:'CO[%]', field:'co'},
						{icon:'../images/jiaozhuncs/flag.png', label:'CO2[%]', field:'co2'},
						{icon:'../images/jiaozhuncs/flag.png', label:'CH4[%]', field:'ch4'}
					],
					valObj:{co:'0.463', co2:'0.200',ch4:'0.336'},
					arr2_1: [
						{color: '#5fb725', label:'氢含量[%]', field:'45'},
						{color: '#dc4d29', label:'温度[°C]', field:'60'},
						{color: '#33c7fe', label:'合金系数[%]', field:'87'},
						{color: '#8b2dec', label:'甲烷因素[%]', field:'120'},
						{color: '#de2fb3', label:'气氛碳素[%]', field:'24'}
					],
					arr2_2: [
						{color: '#b7b124', label:'表面碳势[%C]', field:'67'},
						{color: '#a732d9', label:'甲烷碳势[%C]', field:'99'},
						{color: '#615ce9', label:'氧豪伏值[MV]', field:'12'},
						{color: '#ed3c3c', label:'露点[°C]', field:'190'}
					],
				},
				mounted : function(){
					this.now = new Date().format('yyyy-MM-dd hh:mm:ss')
					setInterval(function(){
						this.now = new Date().format('yyyy-MM-dd hh:mm:ss')
					}.bind(this),1000);
					var width = $api.cssVal($api.dom('body'), 'width');
					var height = $api.cssVal($api.dom('body'), 'height');
					console.log('body width:'+width)
					console.log('body height:'+height)
				},
				methods : {
					
				}
			});
			 
		</script>
	</body>

</html>